<!DOCTYPE html>
<html>
<head>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/jsp/head.jsp"%>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/lib/bootstrap/css/bootstrap-tree.css">
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-tree.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/lib/bootstrap/css/bootstrap-table.css">
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-table.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-menu.js"></script>
<script src="${pageContext.request.contextPath}/static/js/menu.js"></script>
<script src="${pageContext.request.contextPath}/static/js/data/data.js"></script>
<style type="text/css">  
/*模块拖拽*/  
.domBtn {
	display:inline-block;cursor:pointer;
	font-size:8px;
	padding:2px;margin:2px 10px;
	border:1px gray solid;background-color:#FFE6B0;
	top:0px;left:300px;
    position:absolute;
}
.dom_tmp {
    position:absolute;
    font-size:4px;
}
</style>
<script type="text/javascript">
var domData = null;
var _x=0,_y=0;
$(function () {
	/*
    $('#dragTreeExample').BootstrapTree({
    	expand: true,
		data: treeData,
		draggable: true,
		onDragStart: function(data,evt){
            var i;
		},
		onDragOver: function(evt){
			var i;
		},
		onDrop: function(evt){
			var i;
		}
	});
    */
    
    $('#dragTree').BootstrapTree({
    	expand: true,
		data: treeData1.toTree('id','pid'),
		draggable: true,
		onDragStart: function(data,evt){
			domData = data;
		},
		onDrop: function(evt){
			var target = $(evt.currentTarget).parent();
			var nodeData = target.data('data');
			$('#dragTree').BootstrapTree('addTreeNode',domData,target);
		}
	});
    
    $('#dragTable').BootstrapTable({
		columns: [
			{display : 'ID', name: 'id'},
			{display : '名称', name: 'text'}
		],
		data: tableData1,
		draggable: true,
		onDragStart: function(data,evt){
			domData = data;			
		},
		onDrop: function(evt){
			var tableData = $('#dragTable').BootstrapTable('getData');
			tableData.add(domData);
			$('#dragTable').BootstrapTable('setData',tableData).BootstrapTable('refresh');
		},
		usePager: false
	});    
    
});

</script>
</head>

<body>
<div class="container">
	<nav id="menu"></nav>
	<!--  
	<div class="row">
	    <div class="col-xs-12">
			<div class="panel panel-default">
		        <div class="panel-heading">拖拽树</div>
		        <div class="panel-body"> 
		            <div id="dragTreeExample"></div>
		        </div>
		        <div class="panel-footer">					            
		        </div>
		    </div>
	    </div>	    
	</div>
	-->
	  
	<div class="row">
	    <div class="col-xs-6">
			<div class="panel panel-default">
		        <div class="panel-heading">拖拽树</div>
		        <div class="panel-body"> 
		            <div id="dragTree"></div>
		        </div>
		        <div class="panel-footer">					            
		        </div>
		    </div>
	    </div>
	    
	    <div class="col-xs-6">
			<div class="panel panel-default">
		        <div class="panel-heading">拖拽表格</div>
		        <div class="panel-body"> 
		            <div id="dragTable"></div>
		        </div>
		        <div class="panel-footer">					            
		        </div>
		    </div>	        
	    </div>       
    </div>
           
</div> 
</body>

</html>